This is an archived forum and the content is probably no longer relevant, but is provided here for posterity.
The active forums are here.
May 20, 2010 12:57pm
Subscribe [3]#1 / May 20, 2010 12:57pm
I’m looking for a simple jquery tree menu script that will convert a unordered list to a collapsible menu for yearly blog archives. It needs to be multi-level and simply use triangles to show and reveal sub levels of the list. Do you have some suggestions?
I’ve scoured the web and can’t find just a simple version. You suggestions are welcome. Thanks.
#2 / May 20, 2010 2:57pm
That shouldn’t even be that hard to make yourself…
Let’s say you have this structure:
// HTML
<ul id="categories">
<li><a href="#">Category 1</a>
<ul>
<li><a href="#">Category 1.1</a></li>
<li><a href="#">Category 1.2</a></li>
<li><a href="#">Category 1.3</a></li>
</ul>
</li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category 3</a>
<ul>
<li><a href="#">Category 3.1</a></li>
<li><a href="#">Category 3.2</a></li>
<li><a href="#">Category 3.3</a></li>
</ul>
</li>
</ul>// CSS
#categories, #categories li, #categories ul {
list-style:none;
margin:0;
padding:0;
}
#categories ul {
padding-left:10px;
}
#categories li {
background:url('arrow_right.gif') no-repeat left center;
padding-left:20px;
}
#categories .open {
background-image:url('arrow_down.gif');
}// Javascript / jQuery
$(function() {
$('#categories ul').hide();
$('#categories li').click(function() {
var sub = $(this).children('ul');
if(sub.is(':visible')) {
sub.show();
$(this).addClass('open');
} else {
sub.hide();
$(this).removeClass('open');
}
});
});I just wrote this off the top of my head, so it might have a few bugs, but it should work. It has no fancy animations, but those are easily added.
Greetz,
Wouter
#3 / May 20, 2010 5:53pm
Wouter,
Thanks for the code. I should have mentioned I’m nothing more than a JavaScript hack and slasher.
And, I also have one more requirement in that the script should save state.
Any other suggestions out there?
#4 / May 20, 2010 7:06pm
Saving the state gets a bit trickier… you’d have to set a cookie with the open branches.
#5 / Jun 01, 2010 3:32am
I ended up using this script for the tree menu:
http://www.dynamicdrive.com/dynamicindex1/treeview/index.htm
#6 / Jul 27, 2014 2:18pm
you can find a good solution here http://www.techdezire.com/category-tree-using-jquery-css/